<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DatetimePicker 日期时间 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col">
            <div class="alert alert-light alert-elevate fade show" role="alert">
                <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
                <div class="alert-text">
                    基于<code>DateTime Picker</code>日期插件
                    <a class="e-link e-font-bold" href="https://www.malot.fr/bootstrap-datetimepicker/" target="_blank">官方文档</a>
                    <a class="e-link e-font-bold" href="https://github.com/smalot/bootstrap-datetimepicker" target="_blank">Github</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <form class="e-form">
                <div class="card">
                    <div class="card-head">
                        <div class="card-head-label">
                            <h3 class="card-head-title">
                                基础
                            </h3>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="e-section">
                            <div class="e-section-title">默认</div>
                            <div class="e-section-info">
                                框架中默认会将<code>.date-picker</code>当做日期插件初始化，默认格式为<code>yyyy-mm-dd</code>
                            </div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-4">默认：</label>
                                    <div class="col-7">
                                        <input type="text" class="form-control date-picker" readonly placeholder="yyyy-mm-dd"/>
                                    </div>
                                </div>
                            </div>
                            <div class="e-separator e-separator--dashed"></div>
                            <div class="e-section-title">自定义格式</div>
                            <div class="e-section-info">
                                如需要自定义格式，可在input上添加<code>[data-format]</code>属性指定所需的属性，该属性支持以下格式
                                <ul>
                                    <li><code>yyyy-mm-dd hh:ii</code></li>
                                    <li><code>yyyy-mm-dd hh</code></li>
                                    <li><code>yyyy-mm-dd</code></li>
                                    <li><code>yyyy-mm</code></li>
                                    <li><code>yyyy</code></li>
                                    <li><code>hh:ii</code></li>
                                </ul>
                            </div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-4">yyyy-mm-dd hh:ii：</label>
                                    <div class="col-7">
                                        <input type="text" class="form-control date-picker" data-format="yyyy-mm-dd hh:ii" readonly placeholder="yyyy-mm-dd hh:ii"/>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-4">yyyy-mm-dd hh：</label>
                                    <div class="col-7">
                                        <input type="text" class="form-control date-picker" data-format="yyyy-mm-dd hh" readonly placeholder="yyyy-mm-dd hh"/>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-4">yyyy-mm-dd（默认）：</label>
                                    <div class="col-7">
                                        <input type="text" class="form-control date-picker" readonly placeholder="yyyy-mm-dd"/>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-4">yyyy-mm：</label>
                                    <div class="col-7">
                                        <input type="text" class="form-control date-picker" data-format="yyyy-mm" readonly placeholder="yyyy-mm"/>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-4">yyyy：</label>
                                    <div class="col-7">
                                        <input type="text" class="form-control date-picker" data-format="yyyy" readonly placeholder="yyyy"/>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-4">hh:ii：</label>
                                    <div class="col-7">
                                        <input type="text" class="form-control date-picker" data-format="hh:ii" readonly placeholder="hh:ii"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-md-6">
            <form class="e-form">
                <div class="card">
                    <div class="card-head">
                        <div class="card-head-label">
                            <h3 class="card-head-title">
                                高级
                            </h3>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="e-section">
                            <div class="e-section-title">视图</div>
                            <div class="e-section-info">
                                你可以在<code>.data-picker</code>上添加<code>[data-start-view="0~4"]</code>、<code>[data-min-view="0~4"]</code>设置插件的默认视图和最小视图；
                                如未指定我们将根据<code>[data-format]</code>设置合适的属性。
                                <ul>
                                    <li>0 - 'hour' for the hour view</li>
                                    <li>1 - 'day' for the day view</li>
                                    <li>2 - 'month' for month view (the default)</li>
                                    <li>3 - 'year' for the 12-month overview</li>
                                    <li>4 - 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.</li>
                                </ul>
                            </div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-4">日期：</label>
                                    <div class="col-7">
                                        <input type="text" class="form-control date-picker" data-start-view="3" data-min-view="0" readonly placeholder="yyyy-mm-dd"/>
                                    </div>
                                </div>
                            </div>
                            <div class="e-separator e-separator--dashed"></div>
                            <div class="e-section-title">显示今天</div>
                            <div class="e-section-info">
                                你可以在<code>.data-picker</code>上添加<code>[data-show-today="true/false"]</code>设置插件是否显示<code>今天</code>按钮。
                            </div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-4">日期：</label>
                                    <div class="col-7">
                                        <input type="text" class="form-control date-picker" data-show-today="true" readonly placeholder="yyyy-mm-dd"/>
                                    </div>
                                </div>
                            </div>
                            <div class="e-separator e-separator--dashed"></div>
                            <div class="e-section-title">日期范围</div>
                            <div class="e-section-info">你可以将两个<code>input.date-picker</code>放到<code>.input-date-range</code>中实现日期范围</div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-4">日期范围：</label>
                                    <div class="col-7">
                                        <div class="input-date-range input-group">
                                            <input type="text" class="form-control date-picker">
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="la la-ellipsis-h"></i></span>
                                            </div>
                                            <input type="text" class="form-control date-picker">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="e-separator e-separator--dashed"></div>
                            <div class="e-section-title">Input Group</div>
                            <div class="e-section-info">你可以在<code>.input-group</code>中使用此插件</div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-form-label col-4">日期：</label>
                                    <div class="col-7">
                                        <div class="input-group date">
                                            <input type="text" class="form-control date-picker" readonly placeholder="yyyy-mm-dd"/>
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="la la-calendar"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-4">时间：</label>
                                    <div class="col-7">
                                        <div class="input-group date">
                                            <input type="text" class="form-control date-picker" data-format="hh:ii" readonly placeholder="hh:ii"/>
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="la la-clock-o"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>